<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>page</title>

    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/forPage.css">
    <link rel="stylesheet" type="text/css" href="../font-awesome-4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">

    <script src="../JQuery/JQuery-2.1.4.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">
        table {
            text-align: center; /*设置水平居中*/
            vertical-align: middle; /*设置垂直居中*/
            font-size: 12px;
        }

        th {
            text-align: center; /*设置水平居中*/
            vertical-align: middle; /*设置垂直居中*/
            font-size: 14px;
        }
    </style>

</head>
<!--<body style="margin: 20px">-->

<body class="hold-transition skin-blue layout-top-nav">
    <div class="main-header">
        <div class="navbar navbar-static-top">
            <div class="navbar-header">
                <a href="#" class="navbar-brand"><b>我的云盘</b></a>
            </div>
        </div>
    </div>

    <div class="content-wrapper">
        <div class="content" style="min-height: 560px">
            <div class="box-header with-border">
                <i class="fa fa-user form-inline pull-left"></i>
                <span style="margin-right: 5rem;font-size: 25px" class="form-inline pull-left">username:
                    <span id="usernameRecord"></span>
                </span>

                <span style="font-size: 25px" class="form-inline pull-left">
                    currentPath:  <span id="currentPathRecord"></span>
                </span>

                <span class="form-inline pull-right">
                    <button type="button" name=""
                            class="btn btn-default pull-right" id="exit">
                        <i class="fa fa-outdent"></i> 退出登录
                    </button>
                </span>

            </div>

            <div class="box-body">
                <div class="box-header with-border">

                    <button type="button" name="add"
                         class="btn btn-default pull-left " id="back">
                          <i class="fa fa-backward"></i>  Back
                    </button>

                    <button type="button" name="add"
                            class="btn btn-default pull-left" onclick="showNewDirectory()">
                        <i class="fa fa-file"></i> 新建文件
                    </button>

                    <!--                    <button type="button" name="add"-->
<!--                            class="btn btn-default pull-left " id="homePage">-->
<!--                        <i class="fa fa-random"></i>首页-->
<!--                    </button>-->

<!--                    <span>   </span>-->
<!--                    <button type="button" name="add"-->
<!--                            class="btn btn-default pull-left " id="myOrder">-->
<!--                        <i class="fa fa-random"></i>   我的订单-->
<!--                    </button>-->

<!--                    <div class="form-inline pull-left">-->
<!--                        <button type="button" name="search" id="search-btn"-->
<!--                                class="btn btn-default pull-right searchBtn" title="查询">-->
<!--                            <i class="fa fa-search"></i>-->
<!--                        </button>-->
<!--                        <input type="text"-->
<!--                               class="form-control pull-left name-search position-search"-->
<!--                               id="keyword" placeholder="商品关键字" />-->
<!--                    </div>-->

<!--                    <button type="button" name="add"-->
<!--                            class="btn btn-default pull-right " id="myData">-->
<!--                        <i class="fa fa-random"></i>   我的信息-->
<!--                    </button>-->

<!--                    <div class="form-inline pull-right">-->
<!--                        <button type="button" name=""-->
<!--                               class="btn btn-default pull-right" id="upload">-->
<!--                        <i class="fa fa-question"></i> upload-->
<!--                        </button>-->
<!--                    </div>-->

<!--                    <div class="form-inline pull-right">-->
<!--                        <input type="file" name=""-->
<!--                               class="btn btn-default pull-right" id="file">-->
<!--&lt;!&ndash;                        <i class="fa fa-question"></i> 客服&ndash;&gt;-->
<!--                        </input>-->
<!--                    </div>-->

                    <form id="uploadForm" enctype="multipart/form-data" >
                        <button id="upload" type="button" class="btn btn-default form-inline pull-right">
                            <i class="fa fa-cloud"></i>upload
                        </button>

                        <input id="file" type="file" name="file" class="form-inline pull-right"/>
                    </form>

                </div>

                <table width="100%" id="filesDisplay" class="table table-bordered" >
                    <thead>
                    <tr>
                        <!--                        <th width="20%"><img class="img-lg img-rounded img-bordered" src="../images/1.jpeg"></th>-->
                        <!--                        <th width="20%"><img class="img-lg img-rounded img-bordered" src="../images/2.jpeg"></th>-->
                        <!--                        <th width="20%"><img class="img-lg img-rounded img-bordered" src="../images/2.jpeg"></th>-->
                        <!--                        <th width="20%"><img class="img-lg img-rounded img-bordered" src="../images/2.jpeg"></th>-->
                        <!--                        <th width="20%"><img class="img-lg img-rounded img-bordered glyphicon-resize-small" src="../images/2.jpeg"></th>-->
                        <th width="33%"></th>
                        <th width="33%"></th>
                        <th width="33%"></th>
                    </tr>
                    </thead>
                    <tbody id="">
                    </tbody>
                </table>

            </div>


        </div>

    </div>

<!--    <h2>主界面</h2>-->
<!--    <div>username:  <span id="usernameRecord"></span></div>-->
<!--    <div>currentPath:  <span id="currentPathRecord"></span></div>-->

<!--    <input type="button" value="back" id = "back">-->
<!--    <input type="button" value="退出登录" id="exit">-->
<!--    <input type="button" value="新建目录" onclick="showNewDirectory()">-->

    <hr><br><br>

    <div class="contextmenu" id="directory_memu">
        <ul>
            <li><a onclick="deleteFile()" >删除</a></li>
            <li><a onclick="showFileDetail()">详情信息</a></li>

        </ul>
    </div>

    <div class="contextmenu" id="file_memu">
        <ul>
            <li><a onclick="deleteFile()" >删除</a></li>
            <li><a onclick="showFileDetail()">详情信息</a></li>
            <li><a onclick="deleteFile()">下载</a></li>
        </ul>
    </div>

<!--    <form id="uploadForm" enctype="multipart/form-data">-->
<!--        <input id="file" type="file" name="file"/>-->
<!--        <button id="upload" type="button">upload</button>-->
<!--    </form>-->


    <hr>

<!--    <div id="filesDisplay">-->
<!--    </div>-->

    <!-- 查看文件详情信息模态框 -->
    <div class="modal fade" id="fileInfoDetailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        文件信息
                    </h4>
                </div>
                <div class="modal-body">

                    <div>
                        <label>文件名:</label>
                        <span id="file-name"></span>
                    </div>

                    <div>
                        <label>创建时间:</label>
                        <span id="file-date"></span>
                    </div>

                    <div>
                        <label>文件类型:</label>
                        <span id="file-type"></span>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="fileInfoDetailModalClose()">
                            close
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    </div>

    <!-- 新建目录，模态框 -->
    <div class="modal fade" id="newDirectoryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        创建目录
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label strong">目录名称</label>
                        <div>
                            <div class="col-md-pull-12">
                                <input class="form-control" type="text" id="newDirectoryPath" />
                            </div>
                            <div class="col-md-2">
                                <span style="color: #F00; fontsize: 30px"></span>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="newDirectoryModalClose()">关闭
                            </button>
                            <button type="button" class="btn btn-primary" onclick="confirmNewDir()">
                                创建
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
        </div>
    </div>

<!--    <img src="../image/img_1.png">-->
<!--    <span>test</span>-->

    <script type="text/javascript">

        // 新建目录模态框确定新建
        function confirmNewDir(){
            var filename = document.getElementById("newDirectoryPath").value;
            var path = sessionStorage.getItem("currentPath");
            var d = {
                "currentPath":path,
                "filename":filename,
            }
            var url = "/makeDir";
            $.ajax({
                type:"post",
                url:url,
                data:d,
                success:function (data){
                    // 清空之前的路径
                    jQuery('#dirPath').val('');

                    if(data.status == "isexist"){
                        alert("该文件夹已存在！")
                    }
                    else {
                        alert("创建成功！");
                        newDirectoryModalClose();
                        showFiles(data.fileList);
                        // var dispaly = document.getElementById("filesDisplay");
                        // dispaly.innerHTML = "";
                        // for (var i = 0;i<data.fileList.length;i++){
                        //     var per = data.fileList[i];
                        //     var row = document.createElement('div');
                        //     row.innerHTML="<div>"+ per.fileName + "  -----  "+per.date + "  -----  "+ per.fileType+"</div>";
                        //     dispaly.appendChild(row);
                        // }
                    }
                }
            })

        }

        // 打开新建目录模态框
        function showNewDirectory(){
            $('#newDirectoryModal').modal('show');
        }

        // 关闭新建目录模态框
        function newDirectoryModalClose(){
            $('#newDirectoryModal').modal('hide');
            $('#newDirectoryPath').val('');
        }

        //打开文件详情模态框
        function showFileDetail(){
            $('#fileInfoDetailModal').modal('show');
        }

        // 关闭文件详情模态框
        function fileInfoDetailModalClose() {
            $('#fileInfoDetailModal').modal('hide');
        }

        // 从本地采用form-data 上传文件
        jQuery('#upload').on('click',function (){
            var filename = jQuery('#file').val();
            if(filename == ""){
                return;
            }

            var path = sessionStorage.getItem("currentPath");
            var formData = new FormData();

            formData.append('file', $('#file')[0].files[0]);
            formData.append('filename',filename);
            formData.append('path',path);
            $.ajax({
                url: '/upload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success:function (data){
                    if(data.status == "ok"){
                        showFiles(data.fileList);
                        alert("文件上传成功！")
                        jQuery('#file').val('');
                    }
                    else if(data.status == "isExist"){
                        alert("文件已存在！")
                        jQuery('#file').val('');
                    }else {
                        alert("服务器异常！")
                        jQuery('#file').val('');
                    }
                }
            })

        })

        // 设置监听器 关闭浏览器自带的右键菜单
        document.addEventListener("contextmenu", (e) => {
            var e = e || window.event;
            e.preventDefault();  //阻止系统右键菜单 IE8-不支持
        });

        // 鼠标点击后，关闭菜单
        document.onclick = function(){
            let directory_memu = document.getElementById('directory_memu');
            directory_memu.style.display = 'none';
            let file_memu = document.getElementById('file_memu');
            file_memu.style.display = 'none';
        }

        // 右键显示显示菜单
        function menuInfo(info){
            let type = info.getAttribute('data-type');
            if(type == "directory"){
                let directory_memu = document.getElementById('directory_memu');
                // 显示菜单
                directory_memu.style.display = 'block';

                // 获取鼠标点击位置
                directory_memu.style.left = info.x + 'px';
                directory_memu.style.top = info.y + 'px';
            }
            else if(type == "file"){
                alert("click....");
                let file_memu = document.getElementById('file_memu');
                // 显示菜单
                file_memu.style.display = 'block';

                // 获取鼠标点击位置
                file_memu.style.left = info.x + 'px';
                file_memu.style.top = info.y + 'px';
            }else{
                alert("warning!")
            }

            sessionStorage.setItem("file-name",info.getAttribute("filename"));

            document.getElementById('file-name').innerText = info.getAttribute('filename');
            document.getElementById('file-date').innerText = info.getAttribute('date');
            document.getElementById('file-type').innerText = info.getAttribute('data-type');
        }

        // 删除选定文件
        function deleteFile(){
            if(confirm("是否确定删除文件？"))
            {
                var d={
                    "path":sessionStorage.getItem("currentPath"),
                    "fileName":sessionStorage.getItem("file-name")
                }
                var url = "/deleteFile";
                $.ajax({
                    type:"post",
                    data:d,
                    url:url,
                    success:function (data){
                        if(data.status == 'ok'){
                            showFiles(data.fileList);
                        }
                    }
                })
            }
        }

        // 加载页面时，更新信息
        jQuery(document).ready(function() {
            document.getElementById("usernameRecord").innerText = sessionStorage.getItem("username");
            document.getElementById("currentPathRecord").innerText = sessionStorage.getItem("currentPath");
            getFiles(sessionStorage.getItem("currentPath"));
        })

        // 点击文件或者文件夹图标响应函数
        function fileHandle(info){
            var type = info.getAttribute('data-type');
            var d = {
                "fileName":info.getAttribute('filename'),
                "currentPath":sessionStorage.getItem("currentPath"),
            }
            if(type == 'directory'){
                var url = "/fileHandle";
                $.ajax({
                    type:"post",
                    url:url,
                    data:d,
                    success:function (data){
                        if(data.status == 'ok'){
                            sessionStorage.setItem("currentPath",data.currentPath);
                            document.getElementById("currentPathRecord").innerText = sessionStorage.getItem("currentPath");
                            showFiles(data.fileList);
                        }else{
                            alert("服务器忙，请稍后再试！");
                        }
                    }
                })
            }
            else if (type == 'file'){
                if(confirm("确定下载文件？")){
                    // 下载文件 直接使用同步调用
                    var fileName=info.getAttribute('filename');
                    var currentPath = sessionStorage.getItem("currentPath");
                    window.location.href = "/download?fileName="+fileName+"&currentPath="+currentPath;
                }

            }


        }

        // 图形显示文件和文件夹
        function showFiles(fileList){
            // var dispaly = document.getElementById("filesDisplay");
            // dispaly.innerHTML = "";
            // for (var i = 0;i<fileList.length;i++){
            //     var per = fileList[i];
            //     var row = document.createElement('div');
            //
            //     if(per.fileType == 'directory'){
            //         row.innerHTML="<span><img src=\"../image/img_1.png\" width=\"75\" height=\"75\" data-type=\"directory\" filename="
            //             + per.fileName+ " date="+per.date+" oncontextmenu=\"menuInfo(this)\" onclick=\"fileHandle(this)\"></img><p>"+per.fileName+"</p><span>";
            //     }
            //
            //     if(per.fileType == 'file'){
            //         row.innerHTML="<span><img src=\"../image/img.png\" width=\"75\" height=\"75\" data-type=\"file\" filename="
            //             +per.fileName+" date="+per.date+" oncontextmenu=\"menuInfo(this)\" onclick=\"fileHandle(this)\"></img><p>"+per.fileName+"</p><span>";
            //     }
            //     dispaly.appendChild(row);
            // }
            var dispaly = document.getElementById("filesDisplay");
            dispaly.innerHTML = "";
            for (var i = 0;i<fileList.length;i++){
                var per = fileList[i];
                var row = document.createElement('span');

                if(per.fileType == 'directory'){
                    row.innerHTML="<a href='#' class='form-inline'><img src=\"../image/img_1.png\" width=\"75\" height=\"75\" data-type=\"directory\" filename="
                        + per.fileName+ " date="+per.date+" oncontextmenu=\"menuInfo(this)\" onclick=\"fileHandle(this)\"></img><p>"+per.fileName+"</p></a>";
                        // + per.fileName+ " date="+per.date+" oncontextmenu=\"menuInfo(this)\" onclick=\"fileHandle(this)\"></img></a>";
                }

                if(per.fileType == 'file'){
                    row.innerHTML="<span class='form-inline'><img src=\"../image/img.png\" width=\"75\" height=\"75\" data-type=\"file\" filename="
                        +per.fileName+" date="+per.date+" oncontextmenu=\"menuInfo(this)\" onclick=\"fileHandle(this)\"></img><p>"+per.fileName+"</p><span>";
                }
                dispaly.appendChild(row);
            }
        }

        // 创建文件夹(test时候用的，现在是采用模态框输入)
        $('#makedir').on('click',function (){
            var filename = document.getElementById('dirPath').value;
            var path = sessionStorage.getItem("currentPath");
            // alert(path);
            var d = {
                "currentPath":path,
                "filename":filename,
            }
            var url = "/makeDir";
            $.ajax({
                type:"post",
                url:url,
                data:d,
                success:function (data){
                    // 清空之前的路径
                    jQuery('#dirPath').val('');

                    if(data.status == "isexist"){
                        alert("该文件夹已存在！")
                    }
                    else {
                        alert("创建成功！");
                        showFiles(data.fileList);
                        // var dispaly = document.getElementById("filesDisplay");
                        // dispaly.innerHTML = "";
                        // for (var i = 0;i<data.fileList.length;i++){
                        //     var per = data.fileList[i];
                        //     var row = document.createElement('div');
                        //     row.innerHTML="<div>"+ per.fileName + "  -----  "+per.date + "  -----  "+ per.fileType+"</div>";
                        //     dispaly.appendChild(row);
                        // }
                    }
                }
            })
        })

        // 获取当前页面的所有文件
        function getFiles(path) {
            var d={ // json 数据类型
                "currentPath":path
            }
            var url = "/getFiles";
            $.ajax({
                type:"post",
                url:url,
                data:d,
                success:function (data){
                    showFiles(data.fileList);
                }
            })
        }

        // 到指定文件目录的测试（test）
        $('#toOther').on('click',function(){
            var path = sessionStorage.getItem("currentPath");
            var newPath = "/rhy/file1";
            sessionStorage.setItem("currentPath",newPath);
            alert(newPath);
            var dispaly = document.getElementById("filesDisplay");
            dispaly.innerHTML="";
            getFiles(newPath);
        })

        // 返回上一级目录
        $('#back').on('click',function (){
            var d = {
                "path":sessionStorage.getItem("currentPath")
            };
            var url = "/back";
            $.ajax({
                type: "post",
                url:url,
                data: d,
                success:function (data){
                    if(data.status == "ok"){
                        sessionStorage.setItem("currentPath",data.path);
                        document.getElementById("currentPathRecord").innerText = sessionStorage.getItem("currentPath");
                        showFiles(data.fileList);
                        // var dispaly = document.getElementById("filesDisplay");
                        // dispaly.innerHTML="";
                        // for (var i = 0;i<data.fileList.length;i++){
                        //     var per = data.fileList[i];
                        //     var row = document.createElement('div');
                        //     row.innerHTML="<div>"+ per.fileName + "  -----  "+per.date + "  -----  "+ per.fileType+"</div>";
                        //     dispaly.appendChild(row);
                        // }
                        sessionStorage.setItem("currentPath",data.path);
                    }
                    else {
                        alert("已是用户根目录!")
                    }
                }
            })
        })

        // 退出登录
        $('#exit').on('click',function (){
            if(confirm("是否确定退出？")){
                sessionStorage.removeItem("username");
                sessionStorage.removeItem("currentPath");
                document.location.href = "loginBetterOne.html";
            }
        })

    </script>

</body>
</html>